<template>
  <!-- 筛选 -->
  <div class="search-box">
    <div class="search-header">
      <span>筛选条件</span>
      <span @click="isShowSearchList = !isShowSearchList">
        {{ isShowSearchList ? '收起' : '展开'
        }}<el-icon :style="{ transform: isShowSearchList ? 'rotate(0deg)' : 'rotate(180deg)' }" style="transition: 0.2s all;margin-left:4px"
          ><ArrowDown
        /></el-icon>
      </span>
    </div>
    <div class="search-list" v-show="isShowSearchList">
      <el-form :model="searchValue" ref="searchForms" label-width="100px" class="formClass" @keyup.enter="getList">
        <el-row>
          <el-col :span="6"
            ><el-form-item prop="docConfigName">
              <template #label> <baseLable label="流程单据"></baseLable></template>
              <template #default> <el-input v-model="searchValue.docConfigName" clearable :placeholder="t('keys.pleaseEnter')" /> </template>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item prop="startUserName">
              <template #label> <baseLable :label="t('keys.initiatorName')"></baseLable></template>
              <template #default
                ><el-input
                  v-model.trim="searchValue.startUserName"
                  @click.native="inputClick('ZEMD.EMP_INFO')"
                  clearable
                  readonly
                  placeholder="请点击"
                />
                <span class="el-input__suffix closevalIcon" v-if="searchValue.startUserName" @click="closeClickVal"
                  ><span class="el-input__suffix-inner"
                    ><i class="el-icon el-input__icon el-input__clear"
                      ><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                        <path
                          fill="currentColor"
                          d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
                        ></path>
                        <path
                          fill="currentColor"
                          d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                        ></path></svg></i></span
                ></span> </template></el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item prop="createStartTime">
              <template #label> <baseLable label="申请时间从"></baseLable></template>
              <template #default
                ><el-date-picker
                  v-model="searchValue.createStartTime"
                  style="width: 100%"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="申请时间从"
                  :disabledDate="pickerOptionsStart"
                  clearable
                ></el-date-picker
              ></template> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item prop="createEndTime">
              <template #label> <baseLable label="申请时间至"></baseLable></template>
              <template #default
                ><el-date-picker
                  v-model="searchValue.createEndTime"
                  style="width: 100%"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="申请时间至"
                  :disabledDate="pickerOptionsEnd"
                  clearable
                ></el-date-picker
              ></template> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"
            ><el-form-item prop="state">
              <template #label> <baseLable label="状态"></baseLable></template>
              <template #default
                ><el-select v-model="searchValue.state" placeholder="请选择" clearable style="width: 100%;">
                  <el-option v-for="item in enabledFlagList" :key="item.name" :label="item.name" :value="item.value"> </el-option> </el-select
              ></template> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
    </div>
    <div class="search-btn">
      <el-button type="primary" @click="getList">筛选</el-button>
      <el-button type="info" @click="resetForm(searchForms)">重置</el-button>
    </div>
  </div>
  <!-- 表格 -->
  <div class="table-box">
    <el-table
      :data="tableData.slice((curPage - 1) * pageSizes, curPage * pageSizes)"
      :current-page.sync="curPage"
      border
      v-loading="tableLoading"
      ref="multipleTableRef"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" align="center" width="60px"></el-table-column>
      <el-table-column label="工作流编码" prop="procInsId" show-overflow-tooltip></el-table-column>
      <el-table-column label="实例流程名称" prop="instanceManageName" show-overflow-tooltip></el-table-column>
      <el-table-column label="流程定义名称" prop="procDefName" show-overflow-tooltip></el-table-column>
      <el-table-column label="流程单据" prop="docConfigName" show-overflow-tooltip></el-table-column>
      <el-table-column :label="t('keys.initiatorName')" prop="startUserName" show-overflow-tooltip></el-table-column>
      <el-table-column label="状态" prop="state">
        <template #default="{ row }">
          <!-- 审批中  已结束-审批通过  已结束-审批拒绝 -->
          {{ row.state == 0 ? '审批中' : row.state == 1 ? '已结束-审批通过' : row.state == 2 ? '已结束-审批拒绝' : '' }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" prop="createTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="结束时间" prop="finishTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template #default="{row}">
          <el-button type="info" link @click.stop="gomyAgentDetails(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page-box">
      <el-pagination
        v-model:currentPage="curPage"
        v-model:page-size="pageSizes"
        :background="searchValue.background"
        :page-sizes="store.state.apps.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 值集视图 -->
    <lovView ref="lovViewRef" :lovViewCode="lovViewCode" @lovChange="lovChange"></lovView>
  </div>
</template>

<script setup>
import { reactive, ref, nextTick, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import baseLable from 'components/base-lable'
import { flowtaskDoneList } from 'api/personalCenter'
import { ERR_OK } from 'config/statusCode'
import lovView from 'components/lov-view'
import { getlovList } from '@/api/common'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const store = useStore()
const router = useRouter()
// 是否显示筛选框
const isShowSearchList = ref(true)
const enabledFlagList = reactive([
  { name: '全部', value: '' },
  { name: '审批中', value: 0 },
  { name: '审批通过', value: 1 },
  { name: '审批拒绝', value: 2 }
])

const searchForms = ref(null)
const searchValue = reactive({
  total: 0,
  background: true,
  state: '', // 审批状态
  createEndTime: '', // 创建结束时间
  createStartTime: '', // 创建开始时间
  docConfigName: '', // 单据名称
  startUserId: '',
  startUserName: '' // 创建人名称
})
// 禁止选择
const pickerOptionsStart = (time) => {
  let endDateVal = searchValue.createEndTime
  if (endDateVal) {
    // 减去一天的时间代表可以选择同一天;
    return time.getTime() > new Date(endDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
  }
}
const pickerOptionsEnd = (time) => {
  let beginDateVal = searchValue.createStartTime
  if (beginDateVal) {
    // 减去一天的时间代表可以选择同一天;
    return time.getTime() < new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
  }
}

const lovViewCode = ref('')
const lovViewRef = ref(null)
const inputClick = (val) => {
  lovViewCode.value = val
  nextTick(() => {
    lovViewRef.value.showDrawer()
  })
}
const lovChange = (val) => {
  searchValue.startUserId = val.empId
  searchValue.startUserName = val.empName
}
const closeClickVal = () => {
  searchValue.startUserId = ''
  searchValue.startUserName = ''
}

const resetForm = (searchForms) => {
  if (!searchForms) return
  searchForms.resetFields()
  getList()
}
onActivated(() => {
  getList()
})
// 表格加载中
const tableLoading = ref(false)
// 获取列表
const tableData = ref([])
const curPage = ref(1)
const pageSizes = ref(10)
const queryList = () => {
  curPage.value = 1
  pageSizes.value = 10
  tableData.value = []
  getList()
}

const getList = async () => {
  tableLoading.value = true
  const { code, data } = await flowtaskDoneList(searchValue)
  if (code === ERR_OK) {
    searchValue.total = data.total
    tableData.value = data.list || []
    tableLoading.value = false
  }
}
queryList()

// 分页设置显示条数
const handleSizeChange = (val) => {
  setTimeout(() => {
    pageSizes.value = val
  }, 500)
}
// 下一页
const handleCurrentChange = (val) => {
  setTimeout(() => {
    curPage.value = val
  }, 500)
}
const gomyAgentDetails = (row) => {
  router.push({
    name: 'myParticipationDetails',
    query: {
      docConfigCode: row.docConfigCode,
      docConfigName: row.docConfigName,
      fromUrl: row.docConfigFromAddress,
      taskId: row.taskId,
      taskDefKey: row.taskDefKey,
      processInstanceId: row.procInsId
    }
  })
}
</script>

<style lang="scss" scoped>
.closevalall {
  position: relative;
}
.closevalIcon {
  position: absolute;
  right: 28px;
  top: 0px;
}
.search-box {
  :deep(.el-form-item) {
    margin-right: 12px;
    margin-bottom: 8px;
  }
}
</style>
